<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>阿里巴巴导航栏</title>
    <style>
        /* 清除元素默认的内外边距 */
        *{
            margin: 0;
            padding: 0;
        }
        .bw{
            height: 41px;
            background-color: antiquewhite;
            border-top: 2px solid rebeccapurple;
            border-bottom: 1px solid salmon;
        }
        .bw a{
            /* 转换为行内块 */
            display: inline-block;
            height: 41px;
            /* 文字居中显示 */
            line-height: 41px;
            color: green;
            padding-left: 20px;
            padding-right: 20px;
            background-color: cornflowerblue;
            text-decoration: none;
            font-size: 15px;
        }

        .bw a:hover{
            background-color: magenta;
            color: black;
        }



    </style>
</head>
<body>
    <div class="bw">
        <a href="">网站首页</a>
        <a href="">比屋教育网站链接</a>
        <a href="">web前端课程链接</a>
        <a href="">javaee课程链接</a>
        <a href="">大数据课程链接</a>
        <a href="">面试题解析</a>
    </div>
</body>
</html>